<template>
  <div class="commodityInfo">
    <!-- 小球 -->
    <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
      <div class="ball" v-show="ballFlag" ref="ball"></div>
    </transition>
    <div class="top">
      <swipe :swipeList="swipe" :isfull="false"></swipe>
    </div>
    <div class="centered">
      <div class="cet-top">{{ goodsInfo.title }}</div>
      <div class="cet-lower">
        <p>
          市场价:
          <span class="old">￥{{ goodsInfo.market_price }}</span>
          销售价:
          <span class="now">￥{{ goodsInfo.sell_price }}</span>
        </p>
        <!-- 获取组件的数量 -->
        <number :stock_quantity="goodsInfo.stock_quantity" @getCount="getNumberCount"></number>
        <mt-button type="primary" size="small">立即购买</mt-button>
        <mt-button type="danger" size="small" @click="addCart">加入购物车</mt-button>
      </div>
    </div>
    <div class="lower">
      <div class="lower-top">商品参数</div>
      <div class="lower-centered">
        <p>商品货号:{{ goodsInfo.goods_no }}</p>
        <p>库存情况:{{ goodsInfo.stock_quantity }}</p>
        <p>上架时间:{{ goodsInfo.add_time | dataTime }}</p>
      </div>
      <div class="lower-lower">
        <mt-button
          type="primary"
          size="large"
          plain
          @click="$router.push({path: '/introduce', query: {id: goodsInfo.id}})"
        >图文介绍</mt-button>
        <mt-button
          type="danger"
          size="large"
          plain
          @click="$router.push({path: '/goodsComment', query: {id: goodsInfo.id}})"
        >商品评论</mt-button>
      </div>
    </div>
  </div>
</template>

<script>
import swipe from "../../components/swipe/Swipe";
import number from "../../components/number/Number";
export default {
  name: "commodityInfo",
  components: {
    swipe,
    number
  },
  data() {
    return {
      id: this.$route.query.id,
      swipe: [],
      goodsInfo: {},
      numberCount: 1, // 保存用户选择的商品数量
      ballFlag: false // 控制小球
    };
  },
  created() {
    this.getSwpie();
    this.getGoodsInfo();
  },
  methods: {
    getSwpie() {
      // 获取图片地址，放入轮播图中
      let swipeList = [
        {
          img:
            "https://img.alicdn.com/imgextra/i2/3937219703/O1CN01VSTuUX2LY1YHpAAOy_!!3937219703.jpg"
        },
        {
          img:
            "https://img.alicdn.com/imgextra/i4/1714128138/O1CN01RBSDW929zFiy9T9pq_!!1714128138.png"
        },
        {
          img:
            "https://img.alicdn.com/imgextra/i3/2517790622/O1CN013WCJem1GSutdx2ssr_!!2517790622.jpg"
        }
      ];
      this.swipe = swipeList;
    },
    getGoodsInfo() {
      // 获取商品信息，没有接口自己写数据
      let goodsInfo = {
        id: 0,
        title: "华为 畅享9 Plus 全面屏超清大屏四摄学生智能手机",
        img_url: "https://img.alicdn.com/imgextra/i4/TB1Lm2ThcfpK1RjSZFOGoK6nFXa_094250.jpg",
        add_time: "1563858964",
        goods_no: "SD2587845896",
        stock_quantity: 20,
        market_price: 6388,
        sell_price: 5780
      };
      let goodsInfo1 = {
        id: 1,
        title: "vivo iQOO Neo高通骁龙845处理器",
        add_time: "1563858365",
        img_url: "https://img.alicdn.com/imgextra/i8/TB1NR7haWL7gK0jSZFBIAlZZpXa_022845.jpg",
        goods_no: "SD2587845896",
        stock_quantity: 100,
        sell_price: 1998,
        market_price: 2199
      };
      let goodsInfo2 = {
        id: 2,
        title: "小米Play手机官方旗舰店新正品",
        add_time: "1563825875",
        img_url: "https://img.alicdn.com/imgextra/i6/TB1LB3NVSzqK1RjSZFjjWLlCFXa_110638.jpg",
        goods_no: "SD2587845896",
        stock_quantity: 120,
        sell_price: 2398,
        market_price: 2499
      };
      if (this.id === 0) {
        this.goodsInfo = goodsInfo;
      } else if (this.id === 1) {
        this.goodsInfo = goodsInfo1;
      } else if (this.id === 2) {
        this.goodsInfo = goodsInfo2;
      }else {
        this.goodsInfo = goodsInfo2
      }
    },
    addCart() {
      // 点击加入购物车
      this.ballFlag = !this.ballFlag;
      // 得到一个商品对象 { id: 0, count: 2, price: 6999, selected: true }
      let goodsList = {
        id: this.id,
        count: this.numberCount,
        title: this.goodsInfo.title,
        img_url: this.goodsInfo.img_url,
        price: this.goodsInfo.sell_price,
        selected: true
      };
      // 调用store里面的mutations方法，进行保存信息
      this.$store.commit("addCart", goodsList)
    },
    beforeEnter(el) {
      el.style.transform = "translate(0, 0)";
    },
    enter(el, done) {
      el.offsetWidth;
      // 获取小球位置
      const ballPosition = this.$refs.ball.getBoundingClientRect();
      const badgePosition = document
        .getElementById("badge")
        .getBoundingClientRect();
      // 计算最终位置的X，Y
      const xDist = badgePosition.left - ballPosition.left;
      const yDist = badgePosition.top - ballPosition.top;
      el.style.transform = `translate(${xDist}px, ${yDist}px)`;
      el.style.transition = "all .8s cubic-bezier(.4, -0.3, 1, .68)";
      done();
    },
    afterEnter(el) {
      this.ballFlag = !this.ballFlag;
    },
    getNumberCount(count) {
      // 把子组件的值保存到data里面
      this.numberCount = count;
    }
  }
};
</script>

<style lang="scss" scoped>
.commodityInfo {
  .ball {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: red;
    position: absolute;
    z-index: 99;
    top: 397px;
    left: 137px;
  }
  padding: 10px;
  .top {
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    .mint-swipe {
      height: 200px;
      .mint-swipe-item {
        img {
          height: 100%;
        }
      }
    }
  }
  .centered {
    margin-top: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    .cet-top {
      font-size: 20px;
      line-height: 30px;
      border-bottom: 1px solid #ccc;
      padding: 10px 10px 0 10px;
    }
    .cet-lower {
      padding: 20px 10px;
      font-weight: 800;
      font-size: 14px;
      button {
        margin-right: 10px;
      }
      p span {
        margin-right: 10px;
      }
      .old {
        text-decoration: line-through;
      }
      .now {
        color: red;
        font-size: 18px;
      }
    }
    p {
      line-height: 30px;
    }
  }
  .lower {
    margin-top: 10px;
    border: 1px solid #ccc;
    box-shadow: 0 0 8px #ccc;
    .lower-top {
      font-size: 20px;
      line-height: 40px;
      border-bottom: 1px solid #ccc;
      padding: 10px 10px 0 10px;
    }
    .lower-centered {
      border-bottom: 1px solid #ccc;
      padding: 10px 0;
      p {
        padding: 8px;
        color: #a9a9a9;
      }
    }
    .lower-lower {
      padding: 10px;
      button {
        margin-top: 10px;
      }
    }
  }
}
</style>